<template>
  <div class="w-full statistical-center">
    <statisticalHeader title="幼儿入园一览" />
    <div class="px-40px pb-60px m--9px flex flex-1 gap-18px flex-col">
      <div class="flex gap-10px">
        <el-date-picker
          class="!w-160px"
          popper-class="popper-date-class"
          v-model="queryDate"
          type="date"
          placeholder="请选择日期"
          value-format="YYYYMMDD"
        />
      </div>
      <div ref="echartWarpRef" class="flex gap-26px flex-1">
        <div class="echart-card pt-15px">
          <Echart
            :key="echartsHeight"
            :width="getViewportPx(597)"
            :height="echartsHeight"
            :options="useBarOptions(enterData, jingxiuEChartsOption).baseOptions"
          />
        </div>
        <div class="echart-card">
          <div class="mt-52px flex justify-center gap-173px">
            <div>
              <CountTo
                class="text-48px text-#FF5454"
                :startVal="0"
                :endVal="pageData.totalStudents"
              />
              <div class="text-30px text-#404040">应到人数</div>
            </div>
            <div>
              <CountTo
                class="text-48px text-#0BDFC7"
                :startVal="0"
                :endVal="pageData.enteredStudents"
              />
              <div class="text-30px text-#404040">实到人数</div>
            </div>
          </div>
          <div class="mt-32px flex flex-col items-center gap-35px">
            <div class="text-30px text-#404040">今日入园率</div>
            <div>
              <el-progress
                type="circle"
                :percentage="toFixed((pageData.enteredStudents / pageData.totalStudents) * 100, 2)"
                :width="getViewportPx(362, true)"
                :stroke-width="getViewportPx(20, true)"
              />
            </div>
          </div>
        </div>
        <div class="echart-card pt-15px">
          <Echart
            :key="echartsHeight"
            :width="getViewportPx(597)"
            :height="echartsHeight"
            :options="useBarOptions(enterData, yuanhuEChartsOption).baseOptions"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useBarOptions } from '@/hooks/chart/useBarOptions'
import { getViewportPx, toFixed } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { formatDate } from '@/utils/formatTime'
import statisticalHeader from './components/statisticalHeader.vue'
import { cloneDeep } from 'lodash-es'
const enterData = []
const options: any = ref({
  title: {
    left: 'center',
    padding: [getViewportPx(20, true), 0],
    textStyle: {
      fontSize: getViewportPx(30)
    }
  },
  grid: {
    left: getViewportPx(72),
    bottom: getViewportPx(100)
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: []
  },
  legend: {
    textStyle: {
      fontSize: getViewportPx(24)
    }
  },
  series: [
    {
      name: '入园',
      barWidth: getViewportPx(12),
      itemStyle: {
        // borderRadius: [0, 10, 10, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0.95,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#00ECB8' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#00CBE6' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      label: {
        color: '#00CBE6'
      }
    },
    {
      name: '未入园',
      barWidth: getViewportPx(12),
      itemStyle: {
        // borderRadius: [0, 10, 10, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0.95,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#D974ED' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#5B86F5' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      label: {
        color: '#5B86F5'
      }
    }
  ]
})
const schoolNameMap = {
  jingxiu: '景秀',
  yuanhu: '园湖'
}
const echartWarpRef: any = ref(null)
const echartsHeight = ref(500)
const queryDate = ref(formatDate(new Date(), 'YYYYMMDD'))
const pageData: any = ref({})
const jingxiuEChartsOption = computed(() => {
  return setOptions('jingxiu')
})
const yuanhuEChartsOption = computed(() => {
  return setOptions('yuanhu')
})
const setOptions = (schoolCode) => {
  const baseOptions = cloneDeep(options.value)
  if (pageData.value.schoolInfoList) {
    const schoolInfoList = pageData.value.schoolInfoList
    const defaultClassInfoList = schoolInfoList.find(
      (item) => item.schoolCode === schoolCode
    )?.classInfoList
    baseOptions.title.text = schoolNameMap[schoolCode]
    baseOptions.series[0].data = defaultClassInfoList.map((item) => item.enteredCount)
    baseOptions.series[1].data = defaultClassInfoList.map((item) => item.notEnteredCount)
    baseOptions.yAxis.data = defaultClassInfoList.map((item) => item.className)
  }

  return baseOptions
}
const init = async () => {
  try {
    pageData.value = await statisticalCenterApi.getStudentReport(queryDate.value)
  } catch (error) {
    console.log(error)
  }
}
watch(
  () => queryDate.value,
  () => {
    init()
  },
  {
    immediate: true
  }
)
onMounted(() => {
  echartsHeight.value =
    echartWarpRef.value?.getBoundingClientRect?.()?.height - parseInt(getViewportPx(15, true))
})
</script>
<style lang="scss">
.popper-date-class {
  --el-color-primary: #00cde2;
}
</style>
<style lang="scss" scoped>
@import url('./index.scss');

.echart-card {
  width: 579px;
}

:deep() {
  .el-progress__text {
    font-size: 100px;
    font-weight: 700;
    color: #ff7d7d;
  }

  .el-progress-circle__track {
    stroke: #00cce463;
  }
}
</style>
